<template>
  <view class="cs-grid">
    <uni-row v-for="(rowItems, rowIndex) in chunkItems" class="cs-grid_row" :key="`row_${rowIndex}`">
      <uni-col v-for="(colItem, colItemIndex) in rowItems" :span="2" :offset="colItemIndex > 0 ? 2 : 1" class="centered"
        :key="`col_${rowIndex}_${colItemIndex}`">
        <view>
          <TnAvatar :icon="colItem.icon" shape="circle" />
          <view style="display: block;"><text style="display: block">{{ colItem.title }}</text></view>
        </view>
      </uni-col>
    </uni-row>
  </view>
</template>

<script lang="ts" setup>
import { computed, watch } from "vue";
import { chunk } from "lodash";
import TnAvatar from "@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar.vue";
import { COL_MAXIMUM } from "./cs-btn-grid.constants";

interface CsGridItem {
  title: string;
  icon: string;

  children?: CsGridItem[];
}

defineOptions({
  inheritAttrs: false,
  options: {
    virtualHost: true,
    styleIsolation: 'shared'
  }
})

const { column = COL_MAXIMUM, items } = defineProps<{
  column?: number;
  items: CsGridItem[];
}>();

const chunkItems = computed(() =>
  chunk(items, column > COL_MAXIMUM ? COL_MAXIMUM : column)
);

watch(chunkItems, (newChunkItems) => {
  console.log("chunkItems", newChunkItems);
});
</script>

<style lang="scss" scoped>
.cs-grid {
  // display: flex;
  // flex: 1;
}

.centered {
  text-align: center;
  align-items: center;
}

.cs-grid_row {
  margin-top: 10px;
}

// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
/* #ifdef MP-ALIPAY || MP-WEIXIN */
::v-deep .uni-row {
  margin-bottom: 10px;
}

/* #endif */
</style>
